import React from 'react';
import { observer } from 'mobx-react';
import css from './index.less';
import { Avatar, Card } from 'antd';
import classnames from 'classnames';
import { Bar, WaterWave } from 'ant-design-pro/lib/Charts';
import NumberInfo from 'ant-design-pro/lib/NumberInfo';
import ajax from 'common/utils/ajax';
import moment from 'moment';
import numeral from 'numeral';

const hello = () => {
  const hour = moment().hour();
  let s = '';
  if (hour > 6) {
    s = '早上';
  }
  if (hour > 12) {
    s = '中午';
  }
  if (hour > 14) {
    s = '下午';
  }
  if (hour > 18) {
    s = '晚上';
  }
  return s + '好';
};

@observer
export default class WelcomePage extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      viewData: {},
      awardData: {},
    };
  }

  componentDidMount() {
    this.getData();
  }

  async getData() {
    let data = await ajax.req('charts.getChartData', {});

    this.setState({
      isLoading: false,
      viewData: data.viewData,
      awardData: data.awardData,
    });
  }

  get nickName() {
    const { nick, subNick, isSubAccount } = CFG.user;
    return isSubAccount ? `${nick}:${subNick}` : nick;
  }

  renderBar(type) {

    const { viewData } = this.state;

    const cardProps = {
      key: type,
      title: type,
      className: css.chartCard
    };
    const countProps = {
      className: css.chartAll,
      subTitle: (<span>总{type}</span>),
      total: numeral(viewData[`${type}Total`]).format('0,0')
    };
    const barProps = {
      height: 300,
      data: viewData.list.map(item => ({x: moment(item.date).format('YYYY-MM-DD'), y: item[type]}))
    };
    return (
      <Card {...cardProps}>
        <NumberInfo {...countProps}/>
        <Bar {...barProps}/>
      </Card>
    );
  }

  render() {

    const { isLoading, awardData } = this.state;

    const { nickName } = this;
    const { company, user: { avatar, level } } = CFG;
    return (
      <div>
        <div className={css.pageHeaderContent}>
          <div className={css.avatar}>
            <Avatar size="large" src={avatar} />
          </div>
          <div className={css.content}>
            <div className={css.contentTitle}>{hello()}，{nickName}，祝你开心每一天！</div>
            <div>{company || '盛夏'} - {level}</div>
          </div>
        </div>
        {
          !isLoading && <div className={css.chartsBox}>
            {
              ['pv', 'uv'].map(type => this.renderBar(type))
            }
            <Card title="奖品剩余" className={classnames(css.chartCard, css.over)}>
              <div className={css.waterBox}>
                {
                  awardData.list.map((item, index) => {
                    const props = {
                      key: index,
                      height: 200,
                      title: item.title,
                      percent: item.percent,
                      className: css.water
                    };
                    return <WaterWave {...props}/>;
                  })
                }
              </div>

            </Card>
          </div>
        }
      </div>
    );
  }
}
